<template>
	<view class="video_box">
		<video ref="ad" :id="index" :src="videoUrl" controls @fullscreenchange="fullscreenchange" @play="startPlay()" @pause="pausePlay()" @ended="endedPlay()"></video>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoUrl: '',
				video: null,
				index: 0,
				recordId: 0,
				id: 0
			}
		},
		onLoad(options) {
			this.id = options.id
			this.videoUrl = options.videoUrl
			this.video= uni.createVideoContext(String(this.index))
			this.video.play()
		},
		onUnload () {
			if(this.video!=null) {
				this.video.pause()
				this.video = null
			}
		},
		methods: {
			startPlay() {
				let data = {
					token: this.token,
					user_id: this.$store.getters.getUserId,
					video_id: this.id,
					is_finish: 2,
					isNoNeedLoading: true
				}
				this.$api.add_watch_record(data).then(res => {
					if(res.status) {
						this.recordId = res.res
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
					console.log('添加视频观看记录',res)
				}).catch(err => {
					console.log('添加视频观看记录',err)
				})
				console.log('开始播放')
			},
			pausePlay() {
				console.log('暂停播放')
			},
			endedPlay() {
				let data = {
					token: this.token,
					id: this.recordId,
					is_finish: 1,
					isNoNeedLoading: true
				}
				this.$api.update_watch_record(data).then(res => {
					console.log('编辑视频观看记录',res)
				}).catch(err => {
					console.log('编辑视频观看记录',err)
				})
				console.log('结束播放')
			},
			fullscreenchange(e) {
				if(e.fullScreen==false&&e.fullscreen==false) {
					uni.navigateBack({
					})
				}
			}
		}
	}
</script>

<style>
	.video_box {
		width: 100%;
		height: 100%;
		position: fixed;
	}
	.video_box>video {
		width: 100%;
		height: 100%;
	}
</style>
